<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .c1+p {
            color: blue;
        }
        
        .c2~p {
            color: orange;
        }
    </style>
</head>

<body>
    <!-- div>p{HelloWorld_$$}*4 -->

    <!-- 兄弟：指定元素在参照物元素的后面 -->
    <!-- 02：是01的直接兄弟（邻接兄弟） -->
    <!-- 02，03，04：是01的兄弟（通用兄弟） -->

    <!-- 临界兄弟 -->
    <div>
        <p>HelloWorld_00</p>
        <p class="c1">HelloWorld_01</p>
        <p>HelloWorld_02</p>
        <p>HelloWorld_03</p>
        <p>HelloWorld_04</p>
    </div>

    <!-- 通用兄弟 -->
    <div>
        <p>HelloWorld_00</p>
        <p class="c2">HelloWorld_01</p>
        <p>HelloWorld_02</p>
        <p>HelloWorld_03</p>
        <p>HelloWorld_04</p>
    </div>
</body>

</html>